<template>
  <view class="shadow box5 pingjia-box re">
    <view v-for="item in list" :key="item.id" class="item u-font-26 u-m-b-16 shadow bgff u-p-26">
      <view class="u-flex u-flex-1 u-col-center u-m-b-16">
        <u-image v-if="item.image" :src="item.image" width="80rpx" height="80rpx" shape="circle"></u-image>
        <view class="u-flex-1 u-m-l-16">
          <view class="u-m-b-10">匿名用户</view>
          <view class="fen u-m-r-10 u-font-20"><text class="b u-font-30">5</text>分</view>
        </view>
      </view>
      <view class="u-flex u-flex-1 u-col-center u-tips-color u-font-22 u-m-b-10">
        <u-icon name="map"></u-icon>
        <text class="u-m-l-6">安徽</text>
        <text class="line"></text>
        <text>2024-02-02入住</text>
        <text class="line"></text>
        <text>其他类型</text>
        <text class="line"></text>
        <text>特惠大房</text>
      </view>
      <view class="u-m-b-16 z-line-15 u-666">打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位</view>
      <view class="ov">
        <view class="u-flex u-flex-1 u-col-center">
            <u-image v-for="(items, index) in list" :key="items.id" v-if="items.image" :src="items.image" width="220rpx" height="220rpx" border-radius="10" class="u-m-r-18" @click="showImages(list, index)"></u-image>
        </view>
      </view>
      <view class="huifu">
        <view>商家回复：思念无声，千里外似空谷绝响。天地有，人海里终究惊鸿一瞥。望山欲空，茶香朝暮笺曲调中，竹挽溪风，终过人海携子余程。</view>
       <view class="u-flex u-flex-1 u-col-center u-tips-color u-font-22">
         <u-icon name="map"></u-icon>
         <text class="u-m-l-6">安徽</text>
       </view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		name: "b-pingjia",
		props: {
			// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
			list: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		methods: {
			showImages(imgUrl, index){
			  imgUrl = imgUrl.map(m=>{return m.image})
			  uni.previewImage({
			    loop: true,
			    urls: imgUrl, //可以展示imgUrl 列表中所有的图片
			    current: index //首先当前index对应图片，左右可以切换其他序号的图片
			  });
			}
		}
	}
</script>
<style lang="scss">
  .pingjia-box{
    .fen{color: $uni-color-primary; background-color: $uni-color-primary-bg; padding: 0rpx 16rpx; border-radius: 40rpx; line-height: 30rpx; display: inline-block;}
    .item{border-radius: 8rpx;}
    .huifu{
      background-color: #f9f9f9; border-radius: 8rpx; line-height: 1.8; padding: 20rpx; margin-top: 20rpx; color: #666;
    }
    .line{width: 1px; height: 20rpx; background-color: #ededed; margin: 0 16rpx;}
  }
</style>